<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>活动统计</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
	</head>
	<body>
		<!-- <div class="load-ios"></div>
		<div class="load "><span></span></div> -->
		<section id="empty" class="empty-box color_gray f16 ac">
		<br/><br/><br/><br/><br/><br/><br/><br/>
		活动尚未开始
		</section>
		
		<section id="mod-box" class="w640">	</section>
		
		<script id="test" type="text/html">
		<% if(uid!=''&&isJoin!=0){%>
			<article class="img-34 ac line-gray p10 w70-0 ">
				<% if (header.length>0){%>
				<img class="dib vm" src=<%=header%>>　
				<%}%>
				<% if (header.length==0){%>
				<img class="dib vm" src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
				<%}%>

				<span class="color_dakgray f16 dib vm"><%= nickname %></span>
			</article>
			<article class="progress-box">
				<div class="circle">
					<div class="pie_left"><div class="left"></div></div>
					<div class="pie_right"><div class="right"></div></div>
					<% if(type!=1 && type!=3){%>
					<div class="mask">
						<em class="">累计打卡（天）</em>
						<b class="db"><%=uday%></b>
						<span class="dn"><%=circleday%></span>
						<em class="">目标: <b><%=days%></b> 天</em>
					</div>
					<%}%>
					<!--目标打卡-->

					<% if(type==1 || type==3){%>
					<div class="mask">
						<em class="">累计里程(km)</em>
						<b class="db"><%=utMileage%></b>
						<span class="dn"><%=circleNum%></span>
						<em class="">目标:<b> <%=target%> </b>km</em>
					</div>
					<%}%>
					<!--目标公里-->

				</div>
				<div class="today f13 color_gray ">
					今日里程<br />
					<b class="f16 color_dakgray"><%=umileage%>km</b>
				</div>
				<% if(type!=1&&type!=3){%>
				<div class="all f13 color_gray">
					累计里程<br />
					<b class="f16 color_dakgray"><%=utMileage %>km</b>
				</div>
				<%}%>

				<!--目标打卡-->

				<% if(type==1||type==3){%>
				<div class="all f13 color_gray">
					运动时间<br />
					<b class="f16 color_dakgray"><%=totalRate%>天</b>
				</div>
				<%}%>
				<!--目标公里-->
			</article>
			<%}%>
			<p class="bg_gray_light p10 f14">
				<i class="ico-trumpet"></i>　

				<% if(type!=1 && type!=3){%>
				<span class="dib vm color_gray">
					累计达标<b><%=fNum%></b>人　
					今日达标<b><%=num%></b>人
				</span>
				<%}%>
				<!--目标打卡-->

				<% if(type==1 || type==3){%>
				<span class="dib vm color_gray">
					目标<b><%=target%></b>km　
					目标完成人数<b><%=num%></b>人
				</span>
				<%}%>
				<!--目标公里-->

			</p>
			<% if(members.length==0){%>
				<p class="p10 color-blue f14">参与活动的人都没有跑步，无法统计到数据</p>
			<%}%>
			<ul class="list-06 w640 img-38" >
				<% if(type!=1 && type!=3){%>
				<% for(var i=0; i<members.length ;i++){%>
					<li>
						<span class="num"><%=members[i].rank %></span>
						<img src="<%=members[i].header %>" alt="">
						<dl id="c-blue">
							<dt>
							<% if(members[i].uid==uid){%><i class="ico-me"></i><% } %>			
							<%=members[i].name%>
							
							<div>
								打卡<b><%=members[i].day %></b>天
							</div>
							</dt>
							<dd>累积<%=members[i].tMileage.toFixed(2) %>km  今日<%=members[i].mileage %>km </dd>
							
						</dl>
					</li>	
				<%}%>
				<%}%>
				<!--目标打卡-->

				<% if(type==1 || type==3){%>
				<% for(var i=0; i<members.length ;i++){%>
					<li>
						<span class="num"><%=members[i].rank %></span>
						<img src="<%=members[i].header %>" alt="">
						<dl id="c-blue">
							<dt>
							<% if(members[i].uid==uid){%> <i class="ico-me"></i><% } %> 
							<%=members[i].name%>
							<div>
								完成
								<b>
									<%=parse(members[i].fRate*100) >= 100 ? 100 : parse(members[i].fRate*100) %> %
								</b>
							</div>
							</dt>
							<dd>累积<%=members[i].tMileage.toFixed(2) %>km  今日<%=members[i].mileage  %>km </dd>
							
						</dl>
					</li>	
				<%}%>
				<%}%>
				<!--目标公里-->

			</ul>
			
		</script>
<script>

	var browser = {
	versions: function() {
	var u = navigator.userAgent, app = navigator.appVersion;
	return {//移动终端浏览器版本信息 
	trident: u.indexOf('Trident') > -1, //IE内核
	presto: u.indexOf('Presto') > -1, //opera内核
	webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
	ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
	iPad: u.indexOf('iPad') > -1, //是否iPad
	webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
	};
	}(),
	language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}
	
	$(".load" + (os() == 'ios' ? '-ios' : '')).css('display','block');
	window.onload = function (){
		dipcss();
	};
	function os() {
		return (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) ? 'ios' : 'android';
	}
	function dipcss(){
	
		if (os() == 'ios'){
	 		$(".load-ios").css('display','none')
	 		$("#c-blue dt").css({"color":"#202f53","font-size":"16px"});
	 		$("#c-blue dd").css({"color":"#585c68", "font-size":"13px"});
	 		$("li:gt(2) .num").css({ "color": "#000", "font-size": "20" });
		}else if (browser.versions.android) {
	 		$(".load").css('display','none')
	 		$("#c-blue dt").css({"color":"#585c68","font-size":"17px","font-weight":"normal"});
	 		$("#c-blue dd").css({"color":"#585c68","font-size":"14px"});
	 		$("li:gt(2) .num").css({"color":"#202f53","font-size": "21" })
		}
	}

	var gid = getQueryStringByName('gid');
	var aid = getQueryStringByName('aid');
	$(function(){
		$.getJSON('{$staticHost}/groupWeb/statistics',{ gid:gid, aid:aid }, function(data, error) {
			
			if(data.error != undefined && data.error.id != undefined && data.error.id == '201') {
				window.location.href='joggers://login';
				return false;
			}
			
			data.circleNum = data.target*1 ? (((data.utMileage*1)/(data.target*1))*100 >= 100 ? 100 : ((data.utMileage*1)/(data.target*1))*100) : 0;
			/**目标公里**/
			data.circleday = data.target*1 ? (((data.uday*1)/(data.days*1))*100 >= 100 ? 100 : ((data.uday*1)/(data.days*1))*100) : 0;
			/**目标打卡**/

			var html = template('test', data);
			document.getElementById('mod-box').innerHTML = html;
			dipcss();
			/**渲染**/
			

			var timestamp = Date.parse(new Date()).toString();
			var time = data.stime
			if(time > timestamp){
				$("#mod-box").css("display","none");
			    $("#empty").css("display","block");
			}
			/**活动未开始**/

			$('.circle').each(function(index, el) {
				var num = $(this).find('span').text() * 3.6;
				if (num<=180) {
					$(this).find('.right').css('transform', "rotate(" + num + "deg)");
				} else {
					$(this).find('.right').css('transform', "rotate(180deg)");
					$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
				};
			});

			
		});
	
	});
	template.helper("parse",function(str){
		return parseInt(str);
	});
		
		function getQueryString() {
	    var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+", "g"));
	    for (var i = 0; i < result.length; i++) {
	        result[i] = result[i].substring(1);
		    };
		    return result;
		};
		//根据QueryString参数名称获取值
		function getQueryStringByName(name) {
		    var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		    if (result == null || result.length < 1) {
		        return "";
		    };
		    return result[1];
		};
		//根据QueryString参数索引获取值
		function getQueryStringByIndex(index) {
		    if (index == null) {
		        return "";
		    };
		    var queryStringList = getQueryString();
		    if (index >= queryStringList.length) {
		        return "";
		    };
		    var result = queryStringList[index];
		    var startIndex = result.indexOf("=") + 1;
		    result = result.substring(startIndex);
		    return result;
		};
	
</script>

{template 'show/web-footer'}
